<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <!-- 自定义多选框 -->
      <el-table-column width="55">
        <template #default="{ row }">
          <el-checkbox v-model="selectedRows" :label="row.name" :value="row.name"
            :disabled="selectedRows.length > 0 && !selectedRows.includes(row.name)" />
        </template>
      </el-table-column>

      <!-- 数据列 -->
      <el-table-column prop="name" label="名称" width="150"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
      <el-table-column prop="owner" label="所有者"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 表格数据
const tableData = ref([
  { name: "活动A", startDate: "2023-01-01", endDate: "2023-01-10", owner: "张三" },
  { name: "活动B", startDate: "2023-02-01", endDate: "2023-02-10", owner: "李四" },
  { name: "活动C", startDate: "2023-03-01", endDate: "2023-03-10", owner: "王五" },
]);

// 存储已选中的行数据（每次最多选择一列数据）
const selectedRows = ref([]);

</script>

<style scoped>
/* 样式可以根据需求调整 */
</style>
